<script setup lang="ts">
import type { TocItem } from '@/types/article.ts';

defineProps<{
  item: TocItem;
  activeId: string;
  onItemClick: (id: string) => void;
}>();
</script>

<template>
  <div class="toc-item" :class="{ 'active': activeId === item.id }">
    <a
      :href="'#' + item.id"
      :style="{
        paddingLeft: item.level * 12 + 'px',
        opacity: 1 - (item.level - 1) * 0.1
      }"
      @click.prevent="() => onItemClick(item.id)"
    >
      <span class="dot"></span>
      <span class="text">{{ item.text }}</span>
    </a>
    <template v-if="item.children && item.children.length > 0">
      <ArticleTocItem
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        :active-id="activeId"
        :on-item-click="onItemClick"
      />
    </template>
  </div>
</template>

<style scoped lang="less">
.toc-item {
  margin-bottom: 2px;
  transition: all 0.3s ease;

  // 子项样式
  .toc-item {
    margin-left: 8px;
  }

  a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 14px;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    line-height: 1.5;
    font-family: 'LXGW WenKai', sans-serif;

    .dot {
      width: 4px;
      height: 4px;
      background-color: #d1d5db;
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }

    .text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: color 0.3s ease;
    }

    &:hover {
      color: #60a5fa;
      background-color: rgba(96, 165, 250, 0.05);

      .dot {
        background-color: #60a5fa;
        transform: scale(1.2);
        box-shadow: 0 0 4px rgba(96, 165, 250, 0.3);
      }

      .text {
        color: #60a5fa;
      }
    }
  }

  &.active {
    > a {
      color: #60a5fa;
      background-color: rgba(96, 165, 250, 0.08);
      font-weight: 500;

      .dot {
        background-color: #60a5fa;
        transform: scale(1.2);
        box-shadow: 0 0 4px rgba(96, 165, 250, 0.3);
      }

      .text {
        color: #60a5fa;
      }
    }
  }
}
</style>
